<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>jsx语法法则</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- Don't use this in production: -->
    <script src="../js/babel.min.js"></script>
  </head>

  <style>
    .title {
      background-color: orange;
      width: 200px;
    }
  </style>
  <body>
    <div id="test"></div>

    <script type="text/babel">
      const myId = "aTgUIgU"
      const myData = "HeLLo,rEAct!"

      // 1.创建虚拟DOM
      const VDOM = (                     // 此处一定不要写引号，也不能使用`，因为不是字符串；并且h1标签需要闭合，否则报错 react SyntaxError：内联Babel脚本：Unterminated JSX内容
        <div>
          <h2 className="title" id={myId.toLocaleLowerCase()}>
            <span style={{color: 'white', fontSize: '30px'}}>{myData.toLocaleLowerCase()}</span>
          </h2>
          <h2 className="title" id={myId.toLocaleUpperCase() + '02'}>
            <span style={{ color: 'white', fontSize: '30px' }}>{myData.toLocaleUpperCase()}</span>
          </h2>
          <input type="text" />
          <good>123</good>
          <Good></Good>
        </div>
      )
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"))

      /* 
        jsx语法法则
          1.定义虚拟DOM时，不要写引号。
          2.标签中混入JS表达式时要用{}。I
          3.样式的类名指定不要用class，要用className。
          4.内联样式，要用style=i{key : value}}的形式去写。
          5.只有一个根标签。
          6.标签必须闭合。
          7.标签首字母
            (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
            (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
      */
    </script>

  </body>
</html>